<template>
    <div>
   <topNav :txt="txt"  @showMode='showMode'></topNav>
<div class="main_box">
    <div class="item" v-for="(item,index) in 18" :key="index">
        <img src="../../../static/images/me/headimg.png" alt="">
        <span>小李</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="plus" color="#797979" size="30" />
        </div>
        <span>添加</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="minus" color="#797979" size="30" />
        </div>
        <span>删除</span>
    </div>
</div>
<div class="wactallteam">
    <span @click="skips('/allteam')">查看100名团队成员</span>
    <van-icon name="arrow" />
</div>
<div class="lay"></div>
<div class="tip">
    <span class="tip_max">一级</span><span class="tip_min">股东</span>
</div>
<div class="main_box">
    <div class="item" v-for="(item,index) in 3" :key="index">
        <img src="../../../static/images/me/headimg.png" alt="">
        <span>小李</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="plus" color="#797979" size="30" />
        </div>
        <span>添加</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="minus" color="#797979" size="30" />
        </div>
        <span>删除</span>
    </div>
</div>
<div class="lay"></div>
<div class="tip">
    <span class="tip_max">二级</span><span class="tip_min">财务</span>
</div>
<div class="main_box">
    <div class="item" v-for="(item,index) in 3" :key="index">
        <img src="../../../static/images/me/headimg.png" alt="">
        <span>小李</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="plus" color="#797979" size="30" />
        </div>
        <span>添加</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="minus" color="#797979" size="30" />
        </div>
        <span>删除</span>
    </div>
</div>
<div class="lay"></div>
<div class="tip">
    <span class="tip_max">三级</span><span class="tip_min">总经理</span>
</div>
<div class="main_box">
    <div class="item" v-for="(item,index) in 3" :key="index">
        <img src="../../../static/images/me/headimg.png" alt="">
        <span>小李</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="plus" color="#797979" size="30" />
        </div>
        <span>添加</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="minus" color="#797979" size="30" />
        </div>
        <span>删除</span>
    </div>
</div>
<div class="lay"></div>
<div class="tip">
    <span class="tip_max">四级</span><span class="tip_min">经理</span>
</div>
<div class="main_box">
    <div class="item" v-for="(item,index) in 3" :key="index">
        <img src="../../../static/images/me/headimg.png" alt="">
        <span>小李</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="plus" color="#797979" size="30" />
        </div>
        <span>添加</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="minus" color="#797979" size="30" />
        </div>
        <span>删除</span>
    </div>
</div>
<div class="lay"></div>
<div class="tip">
    <span class="tip_max">五级</span><span class="tip_min">主管</span>
</div>
<div class="main_box">
    <div class="item" v-for="(item,index) in 3" :key="index">
        <img src="../../../static/images/me/headimg.png" alt="">
        <span>小李</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="plus" color="#797979" size="30" />
        </div>
        <span>添加</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="minus" color="#797979" size="30" />
        </div>
        <span>删除</span>
    </div>
</div>
<div class="lay"></div>
    </div>
</template>
<script>
import topNav from "@/components/return"

export default {
       components: {
    topNav
  },
  data(){
      return{
          txt:'团队',
          
      }
  },
  methods:{
      skips(path){
          this.$router.push({path:path})
      }
  }
}
</script>
<style  scoped>
.main_box{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 10px 10px 10px ;
}
.item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin: 10px; */
    width: 20%;
    
}
.item img{
width: 40px;
height: 40px;
margin-top: 10px ;
}
.item span{
    margin-top: 1px;
    color: #8E8E8E;
    font-size: 10px;
}
.item_skip{
    width: 38px;
height: 38px;
border-radius: 5px;
margin-top: 10px ;
border: 1px solid #797979;
display: flex;
justify-content: center;
align-items: center;
}
.wactallteam{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
     color: #8E8E8E;
    font-size: 14px;
    margin-bottom: 10px;
}
.wactallteam span{
    margin-right: 10px;
}
.lay{
    height: 10px;
    background: #eee;
}
.tip{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    
}
.tip_max{
    font-weight: 800;
    font-size: 20px;
    margin-right: 3px;
}
.tip_min{
    font-size: 10px;
}
</style>